<template>
<div class="apply-container">
  <el-steps :active="active" simple finish-status="success">
    <el-step title="填写基本信息" icon="el-icon-edit-package"></el-step>
    <el-step title="支付验证" icon="el-icon-s-promotion"></el-step>
    <el-step title="待审核" icon="el-icon-s-promotion"></el-step>
    <el-step title="完成" icon="el-icon-s-claim"></el-step>
  </el-steps>
  <el-card class="box-card" v-show="active===1">
    <el-form class="userName" ref="submitForm" :model="submitForm" :rules="rules">
      <el-form-item label="OEM名字" prop="oemName">
        <el-input v-model="submitForm.oemName"></el-input>
      </el-form-item>
      <el-form-item label="公司名字" prop="companyName">
        <el-input v-model="submitForm.companyName"></el-input>
      </el-form-item>
      <el-form-item label="法定代表人" prop="legalPerson">
        <el-input v-model="submitForm.legalPerson"></el-input>
      </el-form-item>
      <el-form-item label="法定代表人身份证号" prop="idNumber">
        <el-input v-model="submitForm.idNumber"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="submitForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="营业执照号" prop="businessNum">
        <el-input v-model="submitForm.businessNum"></el-input>
      </el-form-item>
      <el-form-item label="身份证正反面" prop="idPictureFront">
        <el-upload class="upload-demo" :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeFrontUpload" ref="file" accept="image/*" drag multiple @change="uptype=1"><img class="avatar" v-if="frontImageUrl" :src="frontImageUrl" style="width:100%;height:100%"><i class="el-icon-upload" v-if="!frontImageUrl"></i>
          <div class="el-upload__text">将身份证正面拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证正反面" prop="idPictureBack">
        <el-upload class="upload-demo" drag :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeBackUpload" multiple><img class="avatar" v-if="backImageUrl" :src="backImageUrl" style="width:100%;height:100%"><i class="el-icon-upload" v-if="!backImageUrl"></i>
          <div class="el-upload__text">将身份证反面拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="营业执照正面" prop="businessLicense">
        <el-upload class="upload-demo" drag :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeBusinessUpload" multiple><img class="avatar" v-if="bussinessImageUrl" :src="bussinessImageUrl" style="width:100%;height:100%"><i class="el-icon-upload" v-if="!bussinessImageUrl"></i>
          <div class="el-upload__text">将营业执照正面拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitHandle('submitForm')" :loading="loading">提交</el-button>
  </el-card>
  <el-card class="box-card" v-show="active===2">
    <div style="width: 250px; height: 100px;">
      <svg-icon icon-class="apply" style="width: 100px; height: 100px; display: block; float: left;"></svg-icon><span style="font-size: 30px; font-weight: bold; line-height: 100px; width: 150px; display: block; float: right;">OEM认证</span>
    </div>
    <el-card>
      <svg-icon icon-class="present"></svg-icon><span> 介绍</span>
      <ul>
        <li> 11212121</li>
        <li> 11212121</li>
        <li> 11212121</li>
        <li> 11212121</li>
      </ul>
      <h1><img class="qrCode" :src="qrurl"></h1>
    </el-card><!--el-button(type="primary" @click="submitHandle('submitForm')" :loading="loading") 提交-->
  </el-card>
</div>
</template>

<script>
import { acquireOemInfo, uploadOemPicture, submission, getOemPayQRCode } from '@/api/getData'

var qiniu = require('qiniu-js')
var imgUrl = localStorage.getItem('image')
export default {
  name: 'Apply',
  data() {
    const validateOemName = (rule, value, callback) => {
      if (value.length > 50) {
        callback(new Error('OEM名称不能超过50位'))
      } else {
        callback()
      }
    }
    const validateCompanyName = (rule, value, callback) => {
      if (value.length > 100) {
        callback(new Error('公司名称不能超过100位'))
      } else {
        callback()
      }
    }
    const validateLegalPerson = (rule, value, callback) => {
      if (value.length > 20) {
        callback(new Error('法定代表人不能超过20位'))
      } else {
        callback()
      }
    }
    return {
      active: 1,
      uptype: 0,
      qiniuData: {},
      upload_qiniu_url: 'http://up.qiniup.com',
      userName: '',
      company: '',
      legalPerson: '',
      ID: '',
      telephone: '',
      IDPhoto: '',
      certificate: '',
      frontImageUrl: '',
      backImageUrl: '',
      bussinessImageUrl: '',
      loading: false,
      upload_qiniu_addr: imgUrl,
      qrurl: '/api/OEM-recharge-system/oem-order/getOemPayQRCode?',
      submitForm: {
        oemName: '',
        companyName: '',
        legalPerson: '',
        idNumber: '',
        phone: '',
        businessNum: '',
        idPictureFront: '',
        idPictureBack: 'http://sdimg.smerp.com.cn/4050c7f2-86dd-4a57-82c7-3b1a3c754421',
        businessLicense: ''
      },
      rules: {
        oemName: [
          { required: true, message: '请填写OEM名称', trigger: 'blur' },
          { validator: validateOemName }
        ],
        companyName: [
          { required: true, message: '请填写公司名称', trigger: 'blur' },
          { validator: validateCompanyName }
        ],
        legalPerson: [
          { required: true, message: '请填写法定代表人', trigger: 'blur' },
          { validator: validateLegalPerson }
        ],
        idNumber: [
          { required: true, message: '请输入法定代表人身份证号码', trigger: 'blur' },
          { pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/, message: '请输入合法身份证号码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/, message: '请输入合法手机号', trigger: 'blur' }
        ],
        businessNum: [
          { required: true, message: '请输入营业执照号', trigger: 'blur' },
          { pattern: /^([159Y]{1})([1239]{1})([0-9ABCDEFGHJKLMNPQRTUWXY]{6})([0-9ABCDEFGHJKLMNPQRTUWXY]{9})([0-90-9ABCDEFGHJKLMNPQRTUWXY])$/, message: '请输入合法营业执照号', trigger: 'blur' }
        ],
        idPictureFront: [{ required: true, message: '请上传身份证正面照片', trigger: 'change' }],
        idPictureBack: [{ required: true, message: '请上传身份证反面照片', trigger: 'change' }],
        businessLicense: [{ required: true, message: '请上传营业执照照片', trigger: 'change' }]
      }
    }
  },
  watch: {
    async active(value) {
      //console.log(value)
      if (value === 2) {
        const a = await getOemPayQRCode()
        this.qrurl = a
      }
    }
  },
  async created() {
    this.initData()
    const a = await getOemPayQRCode()
    this.qrurl = a
  },
  methods: {
    async initData() {
      const t = await acquireOemInfo()
      if (t._result) {
        // idPictureBack  businessLicense
        // 未付款和没通过的情况下
        if (t.dictStatus === 'OEM_STATUS_NOT_PAY' ||
          t.dictStatus === 'OEM_STATUS_NO_THROUGH'
        ) {
          this.active = 1
        }
        // 没付款
        if (t.dictStatus === 'OEM_STATUS_NOT_PAY') {
          this.active = 2
        }
        // 等待审核
        if (t.dictStatus === 'OEM_STATUS_WAIT_CHECK') {
          this.active = 3
        }
        if (t.dictStatus === 'OEM_STATUS_THROUGH') {
          this.active = 4
        }

        this.submitForm = t.data
        if (t.data.idPictureFront) {
          this.frontImageUrl = imgUrl + t.data.idPictureFront
        }
        if (t.data.idPictureBack) {
          this.backImageUrl = imgUrl + t.data.idPictureBack
        }

        if (t.data.businessLicense) {
          this.bussinessImageUrl = imgUrl + t.data.businessLicense
        }
      }
    },

    async beforeFrontUpload(file) {
      // this.qiniuData.key = file.name;
      if (!this.checkFile(file)) {
        return false
      }
      const tk = await uploadOemPicture({ uploadType: 1 })
      this.qiniuData = tk.data
      this.uptype = 1
    },
    async beforeBackUpload(file) {
      // this.qiniuData.key = file.name;
      if (!this.checkFile(file)) {
        return false
      }
      const tk = await uploadOemPicture({ uploadType: 2 })
      this.qiniuData = tk.data
      this.uptype = 2
    },
    async beforeBusinessUpload(file) {
      // this.qiniuData.key = file.name;
      if (!this.checkFile(file)) {
        return false
      }
      const tk = await uploadOemPicture({ uploadType: 3 })
      this.qiniuData = tk.data
      this.uptype = 3
    },
    checkFile(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleAvatarSuccess: function(res, file) {
      const url = this.upload_qiniu_addr + res.key
      if (this.uptype === 1) {
        this.frontImageUrl = url
      }
      if (this.uptype === 2) {
        this.backImageUrl = url
      }
      if (this.uptype === 3) {
        this.bussinessImageUrl = url
      }
      //console.log(this.imageUrl)
    },
    handleError: function(res) {
      this.$message({
        message: '上传失败',
        duration: 2000,
        type: 'warning'
      })
    },

    submitHandle(submitForm) {
      this.$refs[submitForm].validate(async valid => {
        //console.log(valid)
        if (valid) {
          const t = await submission({
            oemName: this.submitForm.oemName,
            companyName: this.submitForm.companyName,
            legalPerson: this.submitForm.legalPerson,
            idNumber: this.submitForm.idNumber,
            phone: this.submitForm.phone,
            businessNum: this.submitForm.businessNum,
          },
          {
            obj: this,
            key: 'loading'
          })
          if (t._result) {
            this.loading = false
            this.active++
          }
        } else {
          //console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .box-card {
    width: 666px;
    margin: 70px auto;
  }

  .qrCode {
    margin: 0px auto;
  }
</style>
